<template>
  <div class="CoverUpload">
    <el-upload
    ref="uploadRef"
      name="file"
      class="upload"
      :drag="true"
      accept=".png,.PNG,.jpg,JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
      :limit="1"
      :multiple="false"
      :show-file-list="false"
      :on-exceed="handleExceed"
      :http-request="uploadImage"
    >
      <template v-if="!modelValue">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="upload-text">拖拽到此处或 <em>点击上传</em></div>
      </template>
      <template v-else>
        <img :src="proxy.globalInfo.imageUrl + modelValue" />
      </template>
    </el-upload>
  </div>
</template>

<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import { getCurrentInstance, ref } from "vue";
  const { proxy } = getCurrentInstance();
const uploadRef = ref();

const props = defineProps({
  modelValue: {
    type: String,
    default: null,
  }
});

const handleExceed = () => {
  uploadRef.value.submit();
};

const api = {
  uploadUrl: "file/uploadImage",
};

const emit = defineEmits();
const uploadImage = async (file) => {
  console.log("file", file);

  let result = await proxy.Request({
    url: api.uploadUrl,
    dataType: "file",
    params: {
      file: file.file,
      type: 0,
    },
  });
  console.log("result", result);
  const fileName = result.data.fileName
  emit("update:modelValue", fileName);
  emit("callback", fileName);
  uploadRef.value.clearFiles()
};
</script>

<style scoped lang="scss">
.upload-text {
  em {
    color: blue;
    font-style: normal;
    font-size: medium;
  }
}

.CoverUpload {
  width: 100%;
  .upload {
    height: 115px;
    img{
      object-fit: cover;
      height: 100%;
    }
  }
}

::v-deep(.el-upload .el-upload-dragger) {
  padding: 1px;
  height: 115px;
}

.el-icon {
  margin: 0;
}

</style>